<template>
    <div>
     
         <el-col :span="6" :offset="0">
	    
            <el-card class="box-card">
                 <div slot="header" class="clearfix header">
		 <el-input
  class="input-card-name"
  v-if="inputVisible"
  v-model="inputValue"
  ref="saveTagInput"
  size="small"
  @keyup.enter.native="handleInputConfirm"
  @blur="handleInputConfirm"
/>
              <span v-else @click="showInput" >{{card.title}}

	      </span>
              <i class="el-icon-circle-close" @click.stop="deleteItem"  style="position: relative;float: right;right:0px; padding: 3px 0"/>
			     	
                 
                 </div>
		 
		 <el-scrollbar :class="ClassName" wrap-style="overflow-x: hidden;" :native="false">

		 <draggable
			tag="div"
        		class="dragArea"
        		:list="card.content"
        		group="inCard"
        		@change="log">
			<div v-for="(o,index) in card.content" :key="index" class="text item" >
		 	     <a :href="o.url" target="_blank" rel="nofollow">	
			     	{{o.title}}
                 	     </a>
                 	</div>
		 </draggable>
		 
		 </el-scrollbar>

		 <div class="bottom clearfix">
          	     <el-button style="float: right; padding: 3px 0" @click="expand" type="text">+</el-button>
          	 </div>
            </el-card>
	    
         </el-col>
    </div>
</template>
<script>
import draggable from "vuedraggable";
    export default {
        name: "dragCard",

        components: {
	    draggable,
        },
        props:{
            card:{}
	},
        data() {
            return {
	      currentDate: new Date(),
	      isexpand:false,
	      ClassName:"UnExpandCard",
	      inputValue:'',
	      inputVisible:false
            }
        },

        methods: {
	    expand() {
	      console.log("expand");
	      if(this.isexpand){
		this.isexpand=false;
		this.ClassName="UnExpandCard";
	      }else{
	        this.isexpand=true;
		this.ClassName="ExpandCard";
	      }
	    },
	    log(evt) {
	    	console.log(evt);
		this.$store.commit('saveCard',this.card);
	    },
    	    deleteItem() {
	        this.$emit('close', this.card.id);
    	    },
      	    showInput() {
                this.inputVisible = true;
        	this.$nextTick(_ => {
          			 this.$refs.saveTagInput.$refs.input.focus();});
      	    },

      	    handleInputConfirm() {
            	let inputValue = this.inputValue;
        	if (inputValue) {
          	   this.card.title=inputValue;
		   this.$store.commit('saveCard',this.card);
        	}
        	this.inputVisible = false;
        	this.inputValue = '';
      	    }
        },
	mounted(){
	    document.body.ondrop = function (event) {
              event.preventDefault();
              event.stopPropagation();
	    }
	}
    }
</script>
<style scoped>
  .UnExpandCard {
    overflow:hidden;
    height:293px;
    width:100%;
  }
  .ExpandCard {
    overflow:hidden;
    min-height: 293px;
    width:100%;
  }
  .time {
    font-size: 13px;
    color: #999;
  }
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
    clear: both;
  }
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }




  .box-card {
    width: 100%;
    height: 100%;
  }
  .el-col {
    margin: 10px;
    border-radius: 4px;
    width: 350px;
  }
</style>